<template>
  <div class="homeAgreementEdit detailView pd-20">
    <Form :model="item"
          label-position="right"
          :label-width="100"
          :rules="rules"
          ref="form">
      <FormItem label="名称"
                prop="name">
        <Input v-model="item.name"
               type="text"
               v-if="!item.id" />
        <Input v-model="item.name"
               type="text"
               v-else
               disabled />
      </FormItem>
      <FormItem label="医院"
                prop="hospitalId">
        <Select placeholder="输入关键字选择医院"
                clearable
                v-if="!item.id"
                v-model="item.hospitalId"
                filterable
                remote
                :remote-method="remoteMethod"
                :loading="loading"
                class="">
          <Option v-for="(hospital, index) in hospitalList"
                  :value="hospital.id"
                  :key="index">{{hospital.name}}</Option>
        </Select>
        <Input v-model="item.hospitalName"
               type="text"
               v-else
               disabled />
      </FormItem>
      <FormItem label="病种名称"
                prop="diseaseId">
        <Select placeholder="输入关键字选择病种"
                clearable
                v-if="!item.id"
                v-model="item.diseaseId"
                filterable
                remote
                :remote-method="remoteMethod1"
                :loading="loading"
                class="">
          <Option v-for="(disease, index) in diseaseList"
                  :value="disease.id"
                  :key="index">{{disease.name}}</Option>
        </Select>
        <Input v-model="item.diseaseName"
               type="text"
               v-else
               disabled />
      </FormItem>
      <FormItem label="内容"
                prop="content">
        <Input v-model="item.content"
               type="textarea"
               style="width: 100%"
               :autosize="{minRows: 20}" />
      </FormItem>
    </Form>
    <div class="operationView">
      <Button type="primary"
              class="operation_btn"
              @click="handleCancle">取消</Button>
      <Button type="primary"
              class="operation_btn"
              @click="handleSave">保存</Button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "homeAgreementEdit",
    data () {
      let validateHospitalId = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请选择医院'))
        } else {
          callback()
        }
      }
      let validateDiseaseId = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请选择病种'))
        } else {
          callback()
        }
      }
      return {
        loading: false,
        hospitalList: [],
        diseaseList: [],
        item: {
          id: 0,
          name: '',
          hospitalId: '',
          diseaseId: '',
          content: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' }
          ],
          hospitalId: [
            { validator: validateHospitalId, trigger: 'blur' }
          ],
          diseaseId: [
            { validator: validateDiseaseId, trigger: 'blur' }
          ],
          content: [
            { required: true, message: '请输入协议内容', trigger: 'blur' }
          ]
        }
      }
    },
    mounted () {
      if (this.$route.query.id) {
        this._getView()
      }
    },
    methods: {
      remoteMethod (query) {
        if (query !== '') {
          this.loading = true;
          this.ajax({
            type: 'post',
            url: this.api.searchHospital,
            data: {
              pageSize: 20,
              pageStart: 0,
              name: query
            },
            success: (data) => {
              this.hospitalList = data.object
            },
            error: (data) => {
              this.$Message.error(data.message);
            }
          })
        } else {
          this.hospitalList = [];
        }
        this.loading = false;
      },
      remoteMethod1 (query) {
        if (query !== '') {
          this.loading = true;
          this.ajax({
            type: this.api.disLibraryList.type,
            url: this.api.disLibraryList.url,
            data: {
              pageSize: 20,
              pageStart: 0,
              searchCondition: query
            },
            success: (data) => {
              this.diseaseList = data.object
            },
            error: (data) => {
              this.$Message.error(data.message);
            }
          })
        } else {
          this.hospitalList = [];
        }
        this.loading = false;
      },
      handleCancle () {
        this.$router.back(-1)
      },
      handleSave () {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            if (!this.item.content) {
              this.$Message.error('请输入内容');
            } else {
              this.ajax({
                type: this.api.homeAgreementEdit.type,
                url: this.api.homeAgreementEdit.url,
                data: {
                  id: this.item.id,
                  name: this.item.name,
                  hospitalId: this.item.hospitalId,
                  diseaseId: this.item.diseaseId,
                  content: this.item.content
                },
                isSubmit: true,
                success: (data) => {
                  this.$Message.success(data);
                  this.$router.back(-1)
                },
                error: (data) => {
                  this.$Message.error(data.msg);
                }
              })
            }
          }
        })
      },
      _getView () {
        this.ajax({
          type: this.api.homeAgreementView.type,
          url: this.api.homeAgreementView.url,
          data: {
            id: this.$route.query.id
          },
          success: (data) => {
            this.item = data.object
          },
          error: (data) => {
            this.$Message.error(data.msg);
          }
        })
      }
    },
    components: {
    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/scss">
  .homeAgreementEdit {
  }
</style>
